<template>
  <div id="upload">
    <el-upload
      class="upload-demo"
      action=""
      multiple
      :before-upload="beforeUpload"
      :http-request="handleRequest"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :show-file-list="false"
      accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-row class="file-list" v-viewer="{ movable: false }">
      <div
        class="item"
        v-for="(item, index) in fileList"
        :key="index"
        @mouseenter.stop="handleMouseenter(index)"
        @mouseleave.stop="handleMouseleave(index)"
      >
        <img :src="item.url || item.filePath" />
        <el-row class="option">
          <i class="el-icon-picture-outline" @click="handlePreview(item)"></i>
          <i class="el-icon-delete" @click="handleRemove(index)"></i>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
import { storage } from "@/utils/util.js";
import { uploads } from "@/api/common/index";
export default {
  data() {
    return {
      limit: this.uploadData.limit ? this.uploadData.limit : 5, //限制数量
      fileList: [], //返回图片数组
      tempList: [], //计数临时file
      files: [], //计数临时file
      visible: false,
    };
  },
  props: ["uploadData"],
  watch: {
    uploadData: {
      handler(news, old) {
        if (news) {
          this.fileList = news.list;
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.fileList = this.uploadData.list;
  },
  methods: {
    //上传之前
    beforeUpload(file) {
      this.tempList.push(file);
    },
    //上传成功
    handleRequest(res) {
      setTimeout(() => {
        this.files.push(res.file);
        if (this.files.length === this.tempList.length) {
          if (this.files.length + this.fileList.length <= this.limit) {
            let formFile = new FormData();
            for (let i = 0; i < this.files.length; i++) {
              formFile.append("files", this.files[i]);
            }
            uploads(formFile).then(response => {

            });

            // this.$http(
            //   this.uploadData.api ? this.uploadData.api : "/common/uploads",
            //   formFile
            // ).then((res) => {
            //   this.files = [];
            //   this.tempList = [];
            //   this.fileList = [...res.data, ...this.fileList];
            //   this.uploadData.onChange(this.fileList);
            // });
          } else {
            this.files = [];
            this.tempList = [];
            this.MessageBox(
              "提示",
              `请选择图片，或最大上传数不超过${this.limit}张`,
              "error"
            );
          }
        }
      }, 200);
    },
    //移除内容
    handleRemove(key) {
      this.fileList.splice(key, 1);
    },
    //查看内容
    handlePreview(file) {
      const viewer = this.$el.querySelector(".file-list").$viewer;
      viewer.show();
    },
    //鼠标放上操作显示
    handleMouseenter(key) {
      this.fileList[key].hidden = true;
    },
    //鼠标放上操作隐藏
    handleMouseleave(key) {
      this.fileList[key].hidden = false;
    },
  },
};
</script>

<style lang="scss">
.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 78px;
}
.file-list {
  width: 100%;
  margin: 20px 0 0;
  display: flex;
  flex-flow: row nowrap;

  .item {
    width: 80px;
    height: 80px;
    position: relative;

    margin: 0 10px 0 0;

    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: solid 1px #eee;
    }

    .option {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      opacity: 0;

      i {
        color: #fff;
        font-size: 22px;
        margin: 0 6px;
        cursor: pointer;
      }
    }
    &:hover {
      .option {
        opacity: 1;
      }
    }
  }
}
</style>
